<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>wcDiyTool</title>
  <link rel="shortcut icon" href="icons/diy.ico" />
  <link rel="stylesheet" href="lib/tw.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="lib/vue.js"></script>
  <script src="lib/axios.js"></script>
</head>

<body class="body">
  <div class="main">
    <div id="app" class="flex flex-col">
      <!-- 顶部 -->
      <div class="top">
        <div>SLK制作</div>
      </div>
      <!-- 中间 -->
      <div class="flex flex-row mid">
        <!-- 左侧 -->
        <div class="mid-left">
          <!-- 搜索创建 -->
          <div class="flex flex-row p-2  left-input">
            <input type="text" class="border w-3/4" v-model="prokeyword">
            <div class="flex flex-row">
              <div class="mx-1 p-1 rounded bg-blue-400" @click="searchPro">搜索</div>
              <div class="p-1 rounded bg-blue-400" @click="createPro">添加</div>
            </div>
          </div>

          <div class="text-left border-t border-r border-l  p-1  left-list">
            <!-- 切换内置模板与项目 -->
            <div class="flex flex-row text-center left-mid">
              <div class="w-1/2 border bg-blue-400">工程模板</div>
              <div class="w-1/2 border">内置模板</div>
            </div>
            <div class=" overflow-y-scroll left-pros">
              <div class="left-pro-item" v-for="(proName,index) in pros" :key="index">
                <div class="pro-title" @click="loadPro(proName)">{{proName}}</div>
                <div class="pro-content" v-if="currentPro == proName">
                  <div class="border p-1 slk-item" v-for="(slkName,slkIndex) in currentProList" :key="slkIndex">
                    <div class="flex flex-row justify-between slk-title">
                      <div>{{slkName["zh-name"]+"["+slkName.file+"]"}}</div>
                      <div class="flex flex-row ">
                        <div class="ml-2 p-1 rounded bg-blue-400" @click="loadSlk(slkName.file)">查看</div>
                        <div class="ml-2 p-1 rounded bg-blue-400" @click="createSlk(slkName.file)">添加</div>
                      </div>
                    </div>
                    <div class="slk-content" v-if="currentPro == proName && currentSlkName == slkName.file">
                      <div v-if="currentSlk.length > 0">
                        <div v-for="(item,itemIndex) in currentSlk" :key="itemIndex">
                          <div @click="setCurrentItem(item.name)">{{item.name}}</div>
                        </div>
                      </div>
                      <div v-if="currentSlk.length == 0">暂无</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="mid-center">
          <!-- 顶部搜索 -->
          <div class="flex flex-row p-2  mid-top">
            <input type="text" class="border w-3/4" v-model="fieldKeyword">
            <div class="flex flex-row">
              <div class="mx-1 p-1 rounded bg-blue-400">搜索</div>
            </div>
          </div>
          <!-- 属性列表 -->
          <div class="border-t border-r border-l p-1  mid-list">
            <div class="flex flex-row mid-title">
              <div class="field-item field-en">字段名</div>
              <div class="field-item field-v">字段值</div>
              <div class="field-item field-zh">注释</div>
            </div>

            <div class="overflow-y-scroll field-list">
              <div class="flex flex-row mid-item" v-for="(field,fieldIndex) in showFields" :key="fieldIndex">
                <div class="field-item  field-en">{{field.name}}</div>
                <div class="field-item  field-v">
                  <input type="text" class="border w-full" v-model="showFields[fieldIndex]['value']">
                </div>
                <div class="field-item field-zh">{{field.zh}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="mid-right">属性demo和预览</div>
      </div>
      <!-- 底部 -->
      <div class="bottom">foot</div>
    </div>
  </div>
  <script src="js/neutralino.js"></script>
  <script src="js/load.js"></script>
  <script src="js/main.js"></script>
</body>

</html>